<template>
  <transition name="notification">
    <div class="popup-layout" :style="{ 'z-index': zIndex }" v-if="value">
      <div
        class="layout-content"
        :style="{
          width: width + 'px',
        }"
      >
        <div class="layout-head">
          <div class="layout-title">{{ title }}</div>
          <div class="layout-close" @click="emitHandle('close')"></div>
        </div>
        <div class="template-wrap bg-com" v-if="isNeedHeader">
          <img class="upload-img" src="@/assets/common/upload_2.png" alt="" />
          <div class="down-tips">
            请按照模板的格式填写数据，模板中的表头名称不可更改，不能删除
          </div>
          <div class="down-banner" @click="downTemplateHandle">
            <div class="down-btn"></div>
            <div class="down-label">下载模板</div>
          </div>
        </div>
        <el-upload
          class="upload-wrap bg-com"
          drag
          :action="action"
          :accept="fileType"
          :multiple="multiple"
          :show-file-list="false"
          :http-request="handleUpload"
          :before-upload="beforeFileUpload"
        >
          <img class="upload-img" src="@/assets/common/upload_1.png" alt="" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            {{ typeTips }}
          </div>
        </el-upload>
        <div class="file-list" v-if="fileList.length">
          <div class="file-item" v-for="(item, index) in fileList" :key="index">
            <div class="file-left" :class="checkFileType(item.name)"></div>
            <div class="file-right">
              <div class="file-name">
                <div class="label">{{ item.name }}</div>
                <div
                  class="layout-close"
                  @click="removeHandle(item)"
                  v-if="item.percentage >= 100"
                ></div>
                <div class="percentage" v-else>{{ item.percentage }}%</div>
              </div>
              <el-progress
                v-if="item.percentage < 100"
                style="margin-top: 6px"
                :percentage="item.percentage"
                color="#0087d6"
                :stroke-width="4"
                define-back-color="#F8F8F8"
                :show-text="false"
              ></el-progress>
            </div>
          </div>
        </div>
        <div class="footer-list">
          <div
            class="footer-btn"
            :class="item.color"
            v-for="(item, index) in footerList"
            :key="index"
            @click="emitHandle(item.option)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { downLoadTemplate } from "@/api/base/base";
import { comExport } from "@/utils/util";
export default {
  name: "TrUploadFileBox",
  props: {
    // 文件上传提示
    typeTips: {
      type: String,
      default: "支持.xlsx,.xls格式，最多添加9个附件",
    },
    action: {
      type: String,
      default: "",
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    limitNum: {
      type: Number,
      default: 9,
    },
    // 文件类型
    fileType: {
      type: String,
      default: ".xlsx,.xls",
    },
    // 文件限制大小
    maxFileSize: {
      type: Number,
      default: 100,
    },
    value: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: Number,
      default: 1001,
    },
    width: {
      type: Number,
      default: 560,
    },
    title: {
      type: String,
      default: "数据导入",
    },
    templateName: {
      type: String,
      default: "模板.xlsx",
    },
    templateType: {
      type: String,
      default: "ReceiptPlanUploadVO",
    },
    footerList: {
      type: Array,
      default: () => [
        {
          label: "取消",
          option: "close",
          color: "white",
        },
        {
          label: "开始导入",
          option: "confrim",
          color: "blue",
        },
      ],
    },
    isNeedHeader: {
      type: Boolean,
      default: true,
    },
    loadedFileList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    value(newValue) {
      if (!newValue) return;
      this.fileList = JSON.parse(JSON.stringify(this.loadedFileList));
    },
  },
  data: () => ({
    fileList: [],
  }),
  methods: {
    async downTemplateHandle() {
      // this.$message.warning("暂未提供模版");
      let { status, data, statusText } = await downLoadTemplate({
        key: this.templateType,
      });
      if (status !== 200) return this.$message.error(statusText);
      comExport(data, this.templateName);
    },
    beforeFileUpload(file) {
      this.$message.closeAll();
      if (this.fileList.length >= this.limitNum) {
        this.$message.warning(`至多上传${this.limitNum}份附件！`);
        return false;
      }
      if (this.fileList.some((item) => item.name === file.name)) {
        this.$message.warning(`${file.name}已存在，请勿重复上传`);
        return false;
      }
      const fileType = file.name.split(".").pop(); // 获取文件名的后缀
      let fileTypeList = this.fileType
        .split(",")
        .map((item) => item.replace(/\./g, ""));
      console.log(fileTypeList, "fileType");
      if (!fileTypeList.includes(fileType)) {
        this.$message.error("请上传正确的文件格式！");
        return false;
      }
      const isLt10M = file.size / 1024 / 1024 < this.maxFileSize;
      if (!isLt10M) {
        this.$message.error(`上传文件大小不能超过${this.maxFileSize}M`);
        return false;
      }
      this.fileList.push(file);
      this.timeCountDown(file);
    },
    timeCountDown(file) {
      const targetFile = this.fileList.find((item) => item.uid === file.uid);
      this.$set(targetFile, "percentage", 0);
      let interval = setInterval(() => {
        targetFile.percentage = targetFile.percentage + 1;
        if (targetFile.percentage >= 99) {
          clearInterval(interval);
        }
        this.$forceUpdate();
      }, 10);
      setTimeout(() => {
        targetFile.percentage = 100;
        this.$forceUpdate();
      }, 2000);
    },
    checkFileType(name) {
      const excelList = ["xlsx", "xls"];
      const fileType = name.split(".").pop();
      if (excelList.includes(fileType)) return "excel";
      return "excel";
    },
    handleUpload() {},
    removeHandle(val) {
      let index = this.fileList.findIndex((item) => item.name === val.name);
      this.fileList.splice(index, 1);
    },
    emitHandle(type) {
      if (type == "close") {
        this.fileList = [];
        this.$emit("input", false);
        return;
      }
      if (!this.fileList.length)
        return this.$message.warning("至少上传一份附件");
      this.$emit("confrim", this.fileList);
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}
.bg-com {
  padding: 16px;
  border-radius: 6px;
  background-color: #f8f8f8;
  border: 1px solid #e7e7e7;
}
::v-deep.upload-wrap {
  font-size: 0;

  text-align: center;
  .el-upload-dragger {
    background-color: transparent;
    border: none;
    width: 100% !important;
    height: auto;
  }
  .el-upload__tip {
    padding: 0 8px;
    color: #e34d59;
    font-size: 12px;
    margin-top: 8px;
  }

  .el-upload__text {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.9);
    font-size: 12px;
    em {
      color: #0087d6;
      font-weight: 500;
    }
  }

  .tips {
    padding: 0 8px;
    color: #e34d59;
    font-weight: 400;
    font-size: 12px;
    margin-top: 8px;
  }
}
.popup-layout {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(#000, 0.4);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
  .layout-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12),
      0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
    .layout-close {
      width: 20px;
      height: 20px;
      background-image: url("~@/assets/icons/close_2.png");
      background-size: contain;
      cursor: pointer;
    }
    .layout-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      .layout-title {
        color: rgba(#000, 0.9);
        font-weight: 600;
      }
    }
    .template-wrap {
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .down-tips {
        margin: 8px 0 12px 0;
        color: rgba(#000, 0.6);
        font-size: 12px;
      }
      .down-banner {
        padding: 6px 16px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        background-color: #ffffff;
        border: 1px solid #e7e7e7;
        cursor: pointer;
      }
      .down-btn {
        width: 16px;
        height: 16px;
        background-image: url("~@/assets/icons/down_3.png");
        background-size: contain;
      }
      .down-label {
        font-size: 12px;
        color: rgba(#000, 0.9);
        margin-left: 8px;
        line-height: 16px;
      }
    }
    .file-list {
      margin-top: 16px;
      max-height: 253px;
      overflow-y: auto;
    }
    .file-item {
      border-radius: 6px;
      background-color: #f8f8f8;
      border: 1px solid #e7e7e7;
      padding: 13px 16px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .file-left {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        &.excel {
          background-image: url("~@/assets/icons/excel.png");
          background-size: contain;
        }
      }
      .file-right {
        flex: 1;
        margin-left: 12px;
      }
      .file-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .label {
          flex: 1;
          width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: rgba(#000, 0.6);
          font-weight: 500;
          font-size: 14px;
          margin-right: 8px;
        }
        .percentage {
          text-align: right;

          min-width: 36px;
          color: #0087d6;
          font-weight: 400;
          font-size: 12px;
        }
      }
    }
    .footer-list {
      display: flex;
      justify-content: flex-end;
      margin-top: 24px;
      .footer-btn {
        height: 32px;
        border: 1px solid #0087d6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        padding: 0 15px;
        border-radius: 3px;
        font-size: 14px;
        cursor: pointer;
        &.white {
          background: #fff;
          color: #0087d6;
          &:hover {
            color: #4e52da;
            border: 1px solid #4e52da;
          }
        }
        &.blue {
          background: #0087d6;
          color: #fff;
          &:hover {
            background: #4e52da;
            border: 1px solid #4e52da;
          }
        }
      }
    }
  }
}
</style>
